<template>
  <div class='cont'>
    <div class='cont-left'>
      <div class='cont-header'>
        <span>当日执行结果</span>
        <span class='endtime'>截止2018-08-20 18:00:00</span>
      </div>
      <chart :options="bar" ref="bar" theme="ovilia-green" auto-resize style='width:100%;height:100%'></chart>
    </div>
    <div class='cont-right'>
      <div class='cont-header'>
        <span>任务列表</span>
        <span style='float:right;color:dodgerblue;font-size:12px;margin-left:20px'>更多</span>
        <span class='endtime'>截止2018-08-20 18:00:00</span>
      </div>
      <template>
        <el-table :data="tableData" max-height='240' header-row-class-name='table-title' header-cell-class-name='table-head'>
          <el-table-column prop="name" label="任务名称">
          </el-table-column>
          <el-table-column prop="rewu" label="任务类型">
          </el-table-column>
          <el-table-column prop="date" label="最近执行时间">
          </el-table-column>
          <el-table-column prop="state" label="执行结果">
            <template slot-scope="scope">
              <span v-if='scope.row.state==1'>执行成功</span>
              <span v-else style='color:#F56C6C'>执行失败</span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<script>
  import getBar from './data/dataTaskBar'
  export default {
    data() {
      return {
        bar: getBar(),
        tableData: [
          {
            date: '2018-08-20 16:24:01',
            name: '长庆UDB-钻井',
            rewu: '并发',
            state: 1
          }, {
            date: '2018-08-19 06:00:00',
            name: '塔里木UDB',
            rewu: '顺发',
            state: 0
          }, {
            date: '2018-08-19 10:00:00',
            name: '大港UDB',
            rewu: '顺发',
            state: 1
          },
          {
            date: '2018-08-18 18:00:00',
            name: '冀东UDB',
            rewu: '顺发',
            state: 1
          }
        ]
      }
    },
    methods: {}
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .cont {
    .cont-left {
      width: 30%;
      float: left;
      border: 1px solid #ebeef5;
      border-radius: 5px;
      height: 300px;
      padding-top: 40px;
      position: relative;
    }
    .cont-right {
      margin-left: calc(30% + 20px);
      padding: 60px 20px 20px 20px;
      border: 1px solid #ebeef5;
      border-radius: 5px;
      height: 300px;
      position: relative;
      .el-table {
        border-bottom: none;
      }
    }
    .cont-header {
      position: absolute;
      width: 100%;
      padding: 0 20px;
      top: 0;
      left: 0;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #ebeef5;
      font-size: 14px;
      .endtime {
        float: right;
        color: #999;
        font-size: 12px
      }
    }
  }
</style>